<template>
  <div class="make" @click="isOrigin=false">
    <div class="quick-btn" >
      <ul>
        <li @click="uploadText(0)" title="点击添加附件（建议小于20M）">附件</li>
        <li @click="uploadText(1)" title="点击添加超大附件（最多5个,建议300M之内）">超大附件</li>
        <li @click="$refs.dialogProduct.init()" title="点击插入产品信息">产品</li>
        <li @click="$refs.dialogTemp.init()" title="点击插入邮件模板">模板</li>
        <li @click="$refs.dialogSign.init()" title="点击添加签名">签名</li>
        <li>
          <span @click.stop="isOrigin=!isOrigin" title="点击添加我的素材">素材</span>
          <div class="origin" v-show="isOrigin">
            <p @click="openDia(1)">插入图片</p>
            <p @click="openDia(0)">插入视频</p>
          </div>
        </li>
      </ul>
    </div>
    <!--附件列表展示  -->
    <div class="else">
      <!-- 附件-->
      <MailFileWrite :list="form.emailHtmlpicList" @delText="delText" name="附件"></MailFileWrite>
      <!-- 超大附件-->
      <MailFileWrite :list="bigFile" @delText="delBigRow" name="超大附件"></MailFileWrite>
    </div>
    <!-- 富文本编辑器-->
    <UE :config="config" ref="childEdit"
        :catchData="getContent" :htmlContent="form.emailContent"></UE>
    <DialogTemp ref="dialogTemp" @getDialogInfo="insertEditor"></DialogTemp>
    <DialogSign ref="dialogSign" @getDialogSign="insertEditor"></DialogSign>
    <DialogProduct ref="dialogProduct" @getProduct="insertEditor"></DialogProduct>
    <!--    云盘选择-->
    <CloundUp ref="cloundUp" @setFile="setFile"></CloundUp>
    <DialogFileUpload ref="DialogFileUpload" @dealLocalUpload="dealLocalUpload"></DialogFileUpload>
  </div>
</template>

<script>
    import DialogSign from '@/components/mail/DialogSign'
    import DialogTemp from '@/components/mail/DialogTemp'
    import DialogNickname from '@/components/mail/DialogNickname'
    import DialogProduct from '@/components/mail/DialogProduct'
    import MailFileWrite from '@/components/mail/file/MailFileWrite'
    import UE from '@/components/ueditor/ue'
    import CloundUp from '@/components/product/DialogColund'
    import {mapState} from 'vuex'
    import DialogFileUpload from '@/components/mail/file/DialogFileUpload'
    export default {
        name: "MakeBtn",
        components: {DialogTemp, DialogSign, DialogNickname, DialogProduct, MailFileWrite, CloundUp, UE,DialogFileUpload},
        data() {
            return {
                form: {
                    emailContent: '',//正文内容
                    emailHtmlpicList: [],//附件列表
                },
                isNickname: false,
                isOrigin: false,
                config: {
                    initialFrameHeight: 600
                },
                fileType: 0,
                bigFile: []//超大附件
            }
        },
        computed: {
            ...mapState(['common'])
        },
        methods: {
            initContent(val) {
                setTimeout(() => {
                    this.$refs.childEdit.getInit(val)
                }, 300)
            },
            initFile(file) {
                this.form.emailHtmlpicList = file;
            },
            openDia(type) {
                this.isOrigin = false;
                let maxNum = 10, targetAccept = '';
                targetAccept = type ? 'jpg,png,jpeg' : 'mp4,webm,ogg'
                this.$refs.cloundUp.init({
                    maxNum: maxNum,
                    accept: targetAccept
                });
            },
            setFile(type, fileList) {
                let str = '';
                fileList.map(item => {
                    if (type) {//图片
                        str += `<img src="${item.fileUrl}" alt="">`
                    } else {//视频
                        str += `<p><video muted poster="${item.previewUrl}" src="${item.fileUrl}"
style="max-width: 100%;" autoplay="autoplay"  controls="controls"  loop="loop" /></p><p>*</p>`;
                    }
                })
                this.insertEditor(str);
            },
            init(params) {
                //获取默认签名
                if (params) {
                    this.form = Object.assign({}, this.form, params);
                    setTimeout(() => {
                        this.$refs.childEdit.getInit(params.emailContent)
                    }, 200)
                    this.isNickname = params.monocular;
                } else {
                    this.form = {
                        emailContent: '',//正文内容
                        emailHtmlpicList: [],//附件列表
                    }
                    this.bigFile ='';
                    this.$refs.childEdit.reset('');//清空
                }
            },
            getContent(val) {
                this.form.emailContent = val;
                this.$emit('getInfoMake', this.form)
            },
            //信息插进富文本 即可
            insertEditor(content){
                this.form.emailContent += content;
                this.$refs.childEdit.getInit(this.form.emailContent);
            },
            //上传回调处理
            dealLocalUpload(type,list,content){
                if(type){//超大附件
                    this.bigFile=this.bigFile.concat(list);
                    this.insertEditor(content);
                }else{
                    this.form.emailHtmlpicList=this.form.emailHtmlpicList.concat(list);
                    this.$emit('getInfoMake', this.form)
                }
            },
            //上传附件
            uploadText(type) {//type : 0 - 附件 1：超大附件
                if(type&&this.bigFile.length==5){
                    this.$message({
                        message: '超大附件最多可上传五个(单个大小不超过300M)',
                        type: 'success'
                    });
                    return;
                }
                this.$refs.DialogFileUpload.init(type,this.bigFile.length);
            },
            //删除超大附件
            delBigRow(row) {
                this.bigFile.splice(this.bigFile.indexOf(row), 1);
                let current = this.form.emailContent;
                let start = current.indexOf(`<p data-start="${row.long}"></p>`)
                let end = current.indexOf(`<b data-end="${row.long}"></b>`) + 20;
                var str1 = current.substring(0, start);
                var str2 = current.substring(end, current.length);
                this.form.emailContent = str1 + str2;
                //从富文本删除
                this.$refs.childEdit.getInit(this.form.emailContent);
            },
            //删除附件
            delText(index) {
                this.form.emailHtmlpicList.splice(this.form.emailHtmlpicList.indexOf(index), 1);
                this.$emit('getInfoMake', this.form)
            },
        }
    }
</script>

<style scoped lang="scss">
  $bgActiveColor: #E9F3FD;
  $fontColor: #2A97F9;
  $lineColor: #F3F3F3;
  .else {
    margin-bottom: 10px;
  }

  .title-else {
    padding: 10px 0;
    font-size: 14px;
    color: #303133;
  }

  .quick-btn {
    color: #232323e8;
    background-color: #F1F1F1;
    padding: 0 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    ul {
      display: flex;

      li {
        font-size: 14px;
        margin-right: 15px;
        cursor: pointer;
        position: relative;
        line-height: 40px;

        .origin {
          position: absolute;
          bottom: -67px;
          left: -21px;
          cursor: pointer;
          border-radius: 10px;
          box-shadow: 0 4px 6px 4px rgba(4, 0, 0, 0.1);
          z-index: 9999999;

          p {
            line-height: 30px;
            font-size: 13px;
            color: #232323;
            width: 100px;
            text-align: center;
            background-color: #fff;
          }

          p:hover {
            background-color: #E9F3FD;
          }
        }
      }

      .sign {
        position: relative;

        .menu {
          position: absolute;
          top: -100%;
          left: -54%;
          width: 125px;
          box-shadow: 0 6px 9px 1px rgba(4, 0, 0, 0.1);
          border-radius: 10px;

          p {
            text-align: center;
            line-height: 30px;
          }

          .active {
            background-color: $bgActiveColor;
            color: $fontColor;
          }
        }
      }
    }

  }
</style>
